<template>
  <div class="table-container">
    <table>
      <thead>
      <tr>
        <th width="15%"></th>
        <th width="22%">峰平谷</th>
        <th width="28%">单价(元/kWh)</th>
        <th width="20%">时间(h)</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td rowspan="3">
          非夏季
        </td>
        <td>高峰</td>
        <td>{{un_summer_high_fee}}</td>
        <td>{{un_summer_high_hour}}</td>
      </tr>
      <tr>
        <td>平段</td>
        <td>{{un_summer_flat_fee}}</td>
        <td>{{un_summer_flat_hour}}</td>
      </tr>
      <tr>
        <td>低谷</td>
        <td>{{un_summer_low_fee}}</td>
        <td>{{un_summer_low_hour}}</td>
      </tr>
      <tr>
        <td rowspan="3">
          夏季
        </td>
        <td>高峰</td>
        <td>{{summer_high_fee}}</td>
        <td>{{summer_high_hour}}</td>
      </tr>
      <tr>
        <td>平段</td>
        <td>{{summer_flat_fee}}</td>
        <td>{{summer_flat_hour}}</td>
      </tr>
      <tr>
        <td>低谷</td>
        <td>{{summer_low_fee}}</td>
        <td>{{summer_low_hour}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'FeeStatistic',
  data () {
    return {
      summer_high_fee: 0,
      summer_high_hour: 0,
      summer_flat_fee: 0,
      summer_flat_hour: 0,
      summer_low_fee: 0,
      summer_low_hour: 0,
      un_summer_high_fee: 0,
      un_summer_high_hour: 0,
      un_summer_flat_fee: 0,
      un_summer_flat_hour: 0,
      un_summer_low_fee: 0,
      un_summer_low_hour: 0
    }
  },
  props: {
    statistics: {
      type: Object
    }
  },
  watch: {
    statistics: function (val) {
      this.summer_high_fee = val.summer[0].fee
      this.summer_flat_fee = val.summer[1].fee
      this.summer_low_fee = val.summer[2].fee
      this.un_summer_high_fee = val.un_summer[0].fee
      this.un_summer_flat_fee = val.un_summer[1].fee
      this.un_summer_low_fee = val.un_summer[2].fee
      this.summer_high_hour = val.summer[0].hour
      this.summer_flat_hour = val.summer[1].hour
      this.summer_low_hour = val.summer[2].hour
      this.un_summer_high_hour = val.summer[0].hour
      this.un_summer_flat_hour = val.summer[1].hour
      this.un_summer_low_hour = val.summer[2].hour
    }
  }
}
</script>

<style scoped>
  @media screen and (max-width: 1080px){
    table {
      width: 100%;
    }
  }
</style>
